<template>
  <view style="background: rgba(249, 250, 245, 1); padding-bottom: 220rpx;min-height:calc(100vh - 220rpx);">
    <view>
      <image
        class="back-icon"
        @click="$navBack()"
        :style="{
          top: navBarHeight + 'rpx',
        }"
        src="https://cdn1.visiotrip.com/h5AndMini/2023-10-10/back.png"
      />
      <img
        :src="articleDetail.coverImageUrl"
        class="banner-img"
        mode="aspectFill"
        @click="handlePreviewImage()"
        :data-spmCntSuffix="'.handlePreviewImage@'"
        :data-custom="1"
        :data-spm="articleDetail.coverImageUrl"
      />
    </view>
    <view>
      <view class="str-title sticky">
        {{ articleDetail.articleTitle }}
      </view>
      <!-- <view class="str-tag-box">
        <view
          class="tag-box-item"
          v-for="(item, index) in articleDetail.tagList"
          :key="index"
        >
          <img
            class="tag-icon"
            src="https://cdn1.visiotrip.com/h5AndMini/2023-08-29/str-tag-icon.png"
            alt=""
            srcset=""
          />
          <view class="tag-txt">{{ item }}</view>
        </view>
      </view> -->
      <view class="str-summarize">
        <img
          class="str-title-icon"
        src="../../../static/ai/icon/str-tag-icon-2.png"
          alt=""
          srcset=""
        />
        <view class="summarize-box">
          <view class="summarize-txt">
            <rich-text :nodes="articleDetail.summary"></rich-text>
          </view>
        </view>
      </view>
      <block v-if="aboutList.length > 0">
        <view class="str-title">文中提及</view>
        <block>
          <view class="str-tag-box">
            <view
              class="tag-box-item-2"
              :class="{ active: index == tabIndex }"
              v-for="(item, index) in aboutList"
              :key="index"
              @click="tabClick(index)"
            >
              {{ item.title }}
            </view>
          </view>
          <view>
            <!-- 酒店POI数据， type是前端自定义 -->
            <block v-if="aboutList[tabIndex].type == 1">
              <view
                class="summarize-list-box"
                v-for="(poiItem, poiIndex) in aboutList[tabIndex].list"
                :key="poiIndex"
                @click="gotoHotelDetails(poiItem)"
              >
                <block>
                  <view class="box-info">
                    <img
                      class="info-img"
                      :src="poiItem.mainPictureUrl"
                      mode="aspectFill"
                    />
                    <view class="info-content">
                      <view class="content-title">{{
                        poiItem.productName
                      }}</view>
                      <view
                        class="content-flex active"
                        v-if="
                          poiItem.hotelLevel ||
                          poiItem.hotelType ||
                          poiItem.hotelOpenTime
                        "
                      >
                        <img
                          class="icon"
                          src="https://cdn1.visiotrip.com/h5AndMini/2023-09-14/hotel-icon-1.png"
                          mode="aspectFill"
                        />
                        <view style="flex: 1">
                          <text>{{ poiItem.hotelLevel }}</text>
                          <text
                            style="padding: 0 10rpx"
                            v-if="poiItem.hotelType"
                            >|</text
                          >
                          <text>{{ poiItem.hotelType }}</text>
                          <text
                            style="padding: 0 10rpx"
                            v-if="poiItem.hotelOpenTime"
                            >|</text
                          >
                          <text>{{ poiItem.hotelOpenTime }}</text>
                        </view>
                      </view>
                      <view
                        class="content-flex active"
                        v-if="poiItem.salePrice"
                      >
                        <img
                          class="icon"
                          src="https://cdn1.visiotrip.com/h5AndMini/2023-09-14/price.png"
                          mode="aspectFill"
                        /><view style="flex: 1"
                          >{{ poiItem.currencyCode
                          }}{{ poiItem.salePrice }}起</view
                        >
                      </view>
                      <view class="content-flex" v-if="poiItem.address">
                        <img
                          class="icon"
                          src="https://cdn1.visiotrip.com/h5AndMini/2023-09-14/address.png"
                          mode="aspectFill"
                        /><view style="flex: 1">{{ poiItem.address }}</view>
                      </view>
                      <view class="left-item like">
                        <view class="mark-box" v-if="poiItem.poiScore">
                          <view style="display: flex; flex-wrap: wrap; flex: 1">
                            <block
                              v-for="(star, sIndex) in Math.floor(
                                poiItem.poiScore
                              )"
                              :key="sIndex"
                            >
                              <img
                                class="star-icon"
                                src="https://cdn1.visiotrip.com/h5AndMini/2023-08-29/star_selected.png"
                                alt=""
                                srcset=""
                              />
                            </block>
                            <img
                              class="star-icon"
                              v-if="!isInteger(poiItem.poiScore)"
                              src="https://cdn1.visiotrip.com/h5AndMini/2023-08-29/star_select_half.png"
                            />
                          </view>
                          <view style="padding-left: 10rpx; width: 100rpx"
                            >{{ poiItem.poiScore }}分</view
                          >
                        </view>
                        <view class="evaluate" v-if="poiItem.poiCommentCnt"
                          >{{ poiItem.poiCommentCnt }}人推荐</view
                        >
                      </view>
                    </view>
                  </view>
                  <view class="introduce" v-if="poiItem.recReason"
                    >👍🏻推荐理由: {{ poiItem.recReason }}
                  </view>
                </block>
              </view>
            </block>
            <!-- 美食POI数据， type是前端自定义 -->
            <block v-if="aboutList[tabIndex].type == 2">
              <view
                class="summarize-list-box"
                v-for="(poiItem, poiIndex) in aboutList[tabIndex].list"
                :key="poiIndex"
                @click="getRestaurantDetail(poiItem)"
              >
                <view class="box-info">
                  <img
                    class="info-img"
                    :src="poiItem.coverImageUrl"
                    mode="aspectFill"
                  />
                  <view class="info-content">
                    <view class="content-title">{{ poiItem.poiTitle }}</view>

                    <view
                      class="content-flex active"
                      v-if="poiItem.dishStyleList.length > 0"
                    >
                      <img
                        class="icon"
                        src="https://cdn1.visiotrip.com/h5AndMini/2023-7-19/tag.png"
                        mode="aspectFill"
                      />
                      <view style="flex: 1">
                        <text
                          v-for="(dishItem, dishIndex) in poiItem.dishStyleList"
                          :key="'dish' + dishIndex"
                        >
                          {{ dishItem }}
                          <text
                            style="padding: 0 10rpx"
                            v-if="dishIndex != poiItem.dishStyleList.length - 1"
                            >|</text
                          >
                        </text>
                      </view>
                    </view>
                    <view class="content-flex" v-if="poiItem.avgPrice">
                      <img
                        class="icon"
                        src="https://cdn1.visiotrip.com/h5AndMini/2023-09-14/price.png"
                        mode="aspectFill"
                      /><view style="flex: 1">{{ poiItem.avgPrice }}</view>
                    </view>
                    <view class="content-flex" v-if="poiItem.address">
                      <img
                        class="icon"
                        src="https://cdn1.visiotrip.com/h5AndMini/2023-09-14/address.png"
                        mode="aspectFill"
                      /><view style="flex: 1">{{ poiItem.address }}</view>
                    </view>
                    <!-- <view class="content-flex active" v-if="poiItem.salePrice">
                    <img
                      class="icon"
                      src="https://cdn1.visiotrip.com/h5AndMini/2023-08-29/yudin.png"
                      mode="aspectFill"
                    />
                    <view style="flex: 1"
                      >门票
                      <text class="content-txt-1">{{
                        poiItem.currencyCode
                      }}</text
                      ><text class="content-txt-2">{{ poiItem.salePrice }}</text
                      ><text class="content-txt-3">起</text>
                    </view>
                  </view> -->
                  </view>
                </view>
                <view class="introduce" v-if="poiItem.recReason"
                  >👍🏻推荐理由: {{ poiItem.recReason }}
                </view>
              </view>
            </block>
            <!-- 景点POI数据， type是前端自定义 -->
            <block v-if="aboutList[tabIndex].type == 3">
              <view
                class="summarize-list-box"
                v-for="(poiItem, poiIndex) in aboutList[tabIndex].list"
                :key="poiIndex"
                @click="poiDetail(poiItem)"
              >
                <view class="box-info">
                  <img
                    class="info-img"
                    :src="poiItem.coverImageUrl"
                    mode="aspectFill"
                  />
                  <view class="info-content">
                    <view class="content-title">{{ poiItem.poiTitle }}</view>
                    <view class="content-flex">
                      <view
                        v-for="(tagItem, tagIndex) in poiItem.tagList"
                        :key="tagIndex"
                        class="content-tag"
                        >{{ tagItem }}</view
                      >
                    </view>
                    <view
                      class="content-flex active"
                      v-if="poiItem.businessHours"
                    >
                      <img
                        class="icon"
                        src="https://cdn1.visiotrip.com/h5AndMini/2023-09-14/open_time.png"
                        mode="aspectFill"
                      />
                      <view style="flex: 1">{{ poiItem.businessHours }}</view>
                    </view>
                    <view class="content-flex" v-if="poiItem.address">
                      <img
                        class="icon"
                        src="https://cdn1.visiotrip.com/h5AndMini/2023-09-14/address.png"
                        mode="aspectFill"
                      /><view style="flex: 1">{{ poiItem.address }}</view>
                    </view>
                    <view class="content-flex active" v-if="poiItem.salePrice">
                      <img
                        class="icon"
                        src="https://cdn1.visiotrip.com/h5AndMini/2023-08-29/yudin.png"
                        mode="aspectFill"
                      />
                      <view style="flex: 1"
                        >门票
                        <text class="content-txt-1">{{
                          poiItem.currencyCode
                        }}</text
                        ><text class="content-txt-2">{{
                          poiItem.salePrice
                        }}</text
                        ><text class="content-txt-3">起</text>
                      </view>
                    </view>
                  </view>
                </view>
                <view class="introduce" v-if="poiItem.recReason"
                  >👍🏻推荐理由: {{ poiItem.recReason }}
                </view>
              </view>
            </block>
            <!-- 购物POI数据， type是前端自定义 -->
            <block v-if="aboutList[tabIndex].type == 4">
              <view
                class="summarize-list-box"
                v-for="(poiItem, poiIndex) in aboutList[tabIndex].list"
                :key="poiIndex"
                @click="getMarketDetail(poiItem)"
              >
                <view class="box-info">
                  <img
                    class="info-img"
                    :src="poiItem.coverImageUrl"
                    mode="aspectFill"
                  />
                  <view class="info-content">
                    <view class="content-title">{{ poiItem.poiTitle }}</view>
                    <view class="content-flex">
                      <view
                        v-for="(tagItem, tagIndex) in poiItem.tagList"
                        :key="tagIndex"
                        class="content-tag"
                        >{{ tagItem }}</view
                      >
                    </view>
                    <view class="introduction omit4">{{
                      poiItem.introduction
                    }}</view>
                  </view>
                </view>
                <view class="introduce" v-if="poiItem.recReason"
                  >👍🏻推荐理由: {{ poiItem.recReason }}
                </view>
              </view>
            </block>
          </view>
        </block>
      </block>
    </view>
    <view class="str-bottom">
      <view
        v-if="!hiddenChange"
        class="bottom-box"
        :class="{ active: scaleChange }"
        @click="handStrategy(0)"
        :data-spmCntSuffix="`SecretDetail.article@1.change`"
        :data-custom="1"
        :data-spm="1"
      >
        <img
          class="icon-1"
          src="../../../static/ai/icon/change-icon.png"
        />
        换一篇
      </view>
      <view
        class="bottom-box"
        @click="handStrategy(1)"
        :data-spmCntSuffix="`SecretDetail.article@1.detail`"
        :data-custom="1"
        :data-spm="1"
      >
        <img
          class="icon-2"
          src="../../../static/ai/icon/detail-icon.png"
        />
        看详情
      </view>
      <view
        class="bottom-box"
        :class="{ active: scaleCollect }"
        @click="handStrategy(2)"
        :data-spmCntSuffix="`SecretDetail.article@1.collect`"
        :data-custom="1"
        :data-spm="1"
      >
        <img
          class="icon-3"
          src="../../../static/ai/icon/like-icon.png"
        />
        {{ isShowStrategyCard ? "已收藏" : "收藏" }}
        <view class="collect"
          v-if="isShowStrategyCard"
          data-spmCntSuffix="StrategyList.aiStrategy@5.routeButton@"
          :data-spm="1"
          :data-custom="1"
          @click.stop="chatCollect"
        >
          根据你的爱好规划路线
          <img
            class="collect-2"
            src="https://cdn1.visiotrip.com/h5AndMini/2023-08-29/collect-2.png"
          />
        </view>
        <img
          v-if="isShowStrategyCard"
          class="collect-1"
          src="https://cdn1.visiotrip.com/h5AndMini/2023-08-29/collect-1.png"
        />
      </view>
    </view>
    <!-- 美食详情 -->
    <hqsPopup
      v-model="showRestaurant"
      :height="'80vh'"
      :round="20"
      :showClose="false"
      :showHeader="false"
      @onChange="handleAllPop"
    >
      <RestaurantDetails
        ref="restaurantDetails"
        :round="20"
        :overview="restaurantData"
      ></RestaurantDetails>
    </hqsPopup>
    <!-- 商场详情 -->
    <hqsPopup
      v-model="showMarket"
      :height="'80vh'"
      :round="20"
      :showClose="false"
      :showHeader="false"
      @onChange="handleAllPop"
    >
      <MarketDetail :round="20" :overview="marketData"></MarketDetail>
    </hqsPopup>
  </view>
</template>

<script>
  const globalData = uni.getStorageSync("globalData");
  import pointData from '../utils/point'
  import hqsPopup from "../components/hqs-popup/hqs-popup.vue";
  import RestaurantDetails from "../components/restaurantDetails/restaurantDetails.vue";
  import MarketDetail from "../components/restaurantDetails/marketDetail.vue";
export default {
  props: {},
  components: {
    hqsPopup,
    // hotelInfo,
    RestaurantDetails,
    MarketDetail,
  },
  computed: {},
  data() {
    return {
      navBarHeight: globalData.navHeight * 1 - 12,
      scaleCollect: false,
      scaleChange: false,
      isShowStrategyCard: false,
      articleDetail: "",
      tabIndex: 0,
      aboutList: [],
      detailPrams: {},
      showRestaurant: false,
      showMarket: false,
      restaurantData: {},
      marketData: {},
      showLike:false,
      articleList:[],
      parentSpm: {
        ref: "",
        pre: "",
      },
      enterTime: new Date(),
      hiddenChange: true
    };
  },
  onLoad(option) {
    this.getDetail(option.articleId);
    if(uni.getStorageSync('articleList')){
      this.articleList = uni.getStorageSync('articleList').filter(item => item !== option.articleId);
    }else{
      this.articleList = []
    }
    if(option.hiddenChange){
      this.hiddenChange = true
    }else{
      if(this.articleList.length > 0){
        this.hiddenChange = false
      }
    }
    console.log('this.articleList', this.articleList)
  },
  methods: {
    // 预览图片
    handlePreviewImage() {
      let urls = [this.articleDetail.coverImageUrl];
      uni.previewImage({
        urls,
      });
    },
    async getDetail(articleId) {
      let params = {
        articleId: articleId,
      };
      let res = await this.$aiRequest({
        url: "/ai/aihub/article/detail",
        method: "POST",
        params,
      });
      if (res.success) {
        this.articleDetail = res.data;
        this.isShowStrategyCard = res.data.favorite;
        this.getAbout(res.data.poiIdList);
      }
    },
    //获取文中提及
    async getAbout(poiList) {
      // if(this.aboutList.length >0 ) return;
      let params = {
        poiIdList: poiList,
      };
      let res = await this.$aiRequest({
        url: "/ai/aihub/article/relPoi",
        method: "POST",
        params,
      });
      if (res.success) {
        this.setData(res.data);
      }
    },
    setData(data) {
      let arr = [];
      if (data?.hotelList.length > 0) {
        arr.push({
          title: "酒店",
          list: data.hotelList,
          type: 1,
        });
      }
      if (data?.restaurantList.length > 0) {
        arr.push({
          title: "美食",
          list: data.restaurantList,
          type: 2,
        });
      }
      if (data?.scenicList.length > 0) {
        arr.push({
          title: "景点",
          list: data.scenicList,
          type: 3,
        });
      }
      if (data?.shoppingList.length > 0) {
        arr.push({
          title: "购物",
          list: data.shoppingList,
          type: 4,
        });
      }
      this.tabIndex = 0;
      this.aboutList = arr;
      this.$forceUpdate();
    },
    tabClick(index) {
      this.tabIndex = index;
    },
    handStrategy(code) {
      if (code === 0) {
        
        if(this.articleList.length <= 1){
          uni.showToast({
            title:'没有更多了~',
            icon:'none'
          })
          return
        }
        this.articleList = this.articleList.filter(item => item !== this.articleDetail.articleId);
        this.getDetail(this.articleList[0])
        this.scaleChange = true;
        setTimeout(() => {
          this.scaleChange = false;
        }, 500);
        return;
      }
      if (code === 2) {
        this.scaleCollect = true;
        setTimeout(() => {
          this.scaleCollect = false;
        }, 500);
        this.collectFun()
        return;
      }
      uni.navigateTo({
        url: '/ai/pages/notedetails/notedetails?articleId=' + this.articleDetail.articleId
      })
    },
    isInteger(number) {
      return Number.isInteger(number);
    },
    getParams(item) {
      const {
        checkin: checkinTime,
        checkout: checkoutTime,
        supplierProductId: productId,
        rpId,
        productId: stdId,
        storeId,
      } = item;
      return { checkinTime, checkoutTime, productId, rpId, stdId, storeId };
    },
    gotoHotelDetails(item) {
      this.detailPrams = this.getParams(item);
      let url = "/packageAI/pages/aiHotelInfo/aiHotelInfo";
      this.$navTo(url, this.detailPrams, "navigateTo");
    },
    poiDetail(item) {
      uni.navigateTo({
        url: '/ai/pages/POIDetail/index?poiId=' + item.poiId
      })
    },
    //获取餐厅详情
    async getRestaurantDetail(item) {
      let res = await this.$aiRequest({
        url: `/ai/aihub/chat/queryRestaurantDetail/${item.poiId}`,
        method: "GET",
      });
      if (res.success) {
        this.showRestaurant = true;
        this.restaurantData = res.data;
        this.$refs.restaurantDetails.getRecList(res.data);
      } else {
        uni.showToast({
          title: res.errMsg,
          duration: 2000,
          icon: "none",
        });
      }
    },
    //获取商场详情
    async getMarketDetail(item) {
      let res = await this.$aiRequest({
        url: `/ai/aihub/chat/queryMarketDetail/${item.poiId}`,
        method: "GET",
      });
      if (res.success) {
        this.showMarket = true;
        this.marketData = res.data;
      } else {
        uni.showToast({
          title: res.errMsg,
          duration: 2000,
          icon: "none",
        });
      }
    },
    // 监听详情弹窗
    handleAllPop(code) {},
    //收藏
    async collectFun() {
      if (this.isShowStrategyCard) {
        //取消收藏
        let params = {
          articleId: this.articleDetail.articleId,
        };
        let res = await this.$aiRequest({
          url: "/ai//aihub/article/cancelCollecting",
          method: "POST",
          params,
        });
        if (res.success) {
          this.isShowStrategyCard = false;
        }
      } else {
        //收藏
        let params = {
          articleId: this.articleDetail.articleId,
        };
        let res = await this.$aiRequest({
          url: "/ai/aihub/article/collect",
          method: "POST",
          params,
        });
        if (res.success) {
          this.isShowStrategyCard = true;
        }
      }
    },
    chatCollect() {
      let articleId = this.articleDetail.articleId;
      uni.setStorageSync("askQuestion", {
        type: 2,
        txt: "",
        articleId,
      });
      uni.navigateTo({
        url:'/ai/pages/index'
      })
    },
    /**
     * 发送事件数据
     * @param {*} eventId 事件ID
     * @param {*} eventType 事件名
     * @param {*} spmCntSuffix 点位
     * @param {*} obj 业务参数
     */
     postEventData(eventId, eventType, spmCntSuffix, obj) {
      this.$spmFun(
        pointData,
        this.getEventObj(eventId, eventType, spmCntSuffix, obj)
      );
    },
    /**
     * 获取事件数据
     * @param {*} eventId 事件ID
     * @param {*} eventType 事件名
     * @param {*} spmCntSuffix 点位
     * @param {*} obj 业务参数
     */
    getEventObj(eventId, eventType, spmCntSuffix, obj) {
      return {
        event_id: eventId,
        event_type: eventType,
        spm_cnt: `${pointData.platform}.aiSecretDetail.${spmCntSuffix}`,
        spm_pre: this.parentSpm.pre,
        spm_ref: this.parentSpm.ref,
        open_time: this.enterTime.getTime(),
        args: {
          ...obj,
        },
      };
    },
  },
  onShow() {
    let pages = getCurrentPages();
    let currentPage = pages[pages.length - 1];
    let options = currentPage.options;
    this.postEventData("2002", "页面进入", "0.0",options);
  },
  onHide() {
    this.postEventData("2003", "页面离开", "0.0");
  },
};
</script>

<style lang="scss" scoped>
.back-icon {
  position: fixed;
  width: 116rpx;
  height: 118rpx;
  z-index: 11;
}
.banner-img {
  width: 100%;
  height: 500rpx;
}
.str-bottom {
  width: 670rpx;
  height: 120rpx;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0rpx 6rpx 24rpx 0rpx rgba(0, 0, 0, 0.12),
    0rpx 10rpx 30rpx 0rpx rgba(0, 0, 0, 0.08);
  border-radius: 100rpx;
  backdrop-filter: blur(6px);
  position: fixed;
  bottom: 70rpx;
  left: 50%;
  margin-left: -335rpx;
  display: flex;
  justify-content: space-evenly;
  z-index: 12;
  .bottom-box.active {
    transform: scale(0.8);
    transition: transform 0.5s;
  }
  .bottom-box {
    display: flex;
    align-items: center;
    color: $sl-color-black;
    font-size: 24rpx;
    position: relative;
    transform: scale(1);
    transition: transform 0.5s;
    .icon-1 {
      width: 62rpx;
      height: 57rpx;
      margin-right: 12rpx;
    }
    .icon-2 {
      width: 56rpx;
      height: 56rpx;
      margin-right: 12rpx;
    }
    .icon-3 {
      width: 62rpx;
      height: 60rpx;
      margin-right: 12rpx;
    }
    .collect {
      width: 309rpx;
      height: 47rpx;
      background: #f8b840;
      box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(180, 126, 25, 0.2);
      border-radius: 2rpx 20rpx 2rpx 20rpx;
      justify-content: center;
      display: flex;
      align-items: center;
      color: #ffffff;
      position: absolute;
      top: -32rpx;
      left: -145rpx;
      .collect-2 {
        width: 19rpx;
        height: 19rpx;
      }
    }
    .collect-1 {
      width: 19rpx;
      height: 11rpx;
      position: absolute;
      top: 14rpx;
      right: 25rpx;
    }
  }
}
.str-title {
  color: $sl-color-black;
  font-size: 36rpx;
  font-weight: 600;
  padding: 40rpx 40rpx 30rpx 40rpx;
}
.str-tag-box {
  padding: 0 40rpx 20rpx 40rpx;
  display: flex;
  flex-wrap: wrap;
  .tag-box-item {
    height: 50rpx;
    padding: 0 20rpx;
    background: #ecf0ff;
    display: flex;
    align-items: center;
    margin-right: 20rpx;
    margin-bottom: 10rpx;
    border-radius: 10rpx;
    .tag-txt {
      color: #7696ff;
      font-size: 24rpx;
    }
    .tag-icon {
      width: 28rpx;
      height: 34rpx;
      margin-right: 8rpx;
    }
  }
  .tag-box-item-2 {
    height: 66rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 30rpx;
    color: $sl-color-dark-grey;
    font-size: 28rpx;
    background: rgba(27, 156, 97, 0.20);
    margin: 0 30rpx 10rpx 0;
    border-radius: 10rpx;
  }
  .tag-box-item-2.active {
    background: rgba(27, 156, 97, 1);
    color: #ffffff;
  }
}
.str-tag-box.active {
  margin-bottom: 20rpx;
}
.str-summarize {
  width: 710rpx;
  background: rgba(238, 240, 223, 1);
  border-radius: 26rpx;
  margin: 0 auto;
  .str-title-icon {
    width: 153rpx;
    height: 52rpx;
    margin: 20rpx 0 0 20rpx;
  }
  .summarize-box {
    padding: 18rpx 20rpx 10rpx 20rpx;
    .summarize-txt {
      color: $sl-color-black;
      font-size: 28rpx;
      padding-bottom: 16rpx;
    }
  }
}
.summarize-list-box {
  width: 710rpx;
  padding: 30rpx 0;
  background: #ffffff;
  box-shadow: 0rpx 2rpx 8rpx 2rpx rgba(53, 73, 107, 0.05);
  border-radius: 30rpx;
  margin: 0 auto 20rpx auto;
  .box-info {
    width: 670rpx;
    margin: 0 auto;
    display: flex;
    .info-img {
      width: 154rpx;
      height: 260rpx;
      margin-right: 20rpx;
      border-radius: 10rpx;
    }
    .info-content {
      flex: 1;
      .content-flex {
        display: flex;
        color: $sl-color-grey;
        font-size: 24rpx;
        margin-bottom: 10rpx;
        .content-tag {
          padding: 0 14rpx;
          height: 30rpx;
          line-height: 30rpx;
          border-radius: 4rpx;
          border: 1rpx solid rgba(170, 84, 19, 0.40);
          display: flex;
          align-items: center;
          color: rgba(170, 84, 19, 1);
          font-size: 20rpx;
          margin: 0 10rpx 10rpx 0;
        }
        .icon {
          width: 25rpx;
          height: 25rpx;
          margin-right: 10rpx;
        }
        .content-txt-1 {
          font-size: 20rpx;
          color: #ff4f01;
          padding-left: 30rpx;
        }
        .content-txt-2 {
          color: #ff4f01;
          font-size: 32rpx;
        }
        .content-txt-3 {
          color: #999999;
          font-size: 16rpx;
        }
      }
      // .content-flex.active {
      //   align-items: center;
      // }
      .content-title {
        color: $sl-color-black;
        font-size: 32rpx;
        font-weight: 600;
        margin-bottom: 10rpx;
      }
    }
  }
  .introduce {
    width: 670rpx;
    background: rgba(238, 240, 223, 1);
    border-radius: 10rpx;
    margin: 20rpx auto 0 auto;
    font-size: 24rpx;
    color: $sl-color-black;
    display: flex;
    align-items: center;
    padding: 10rpx;
  }
}
.star-icon {
  width: 26rpx;
  height: 26rpx;
}
.left-item {
  display: flex;
  flex-wrap: wrap;
  padding-top: 35rpx;
  .mark-box {
    display: flex;
  }
  .evaluate {
    color: $sl-color-grey;
    font-size: 24rpx;
    padding-left: 40rpx;
  }
}
.like {
  font-size: 24rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: $sl-color-dark-orage;
  line-height: 33rpx;
}
</style>
